<template>
  <div class="four">
    <div class="flex align-center justify-center">
      <div class="item-title flex align-center justify-center">运行状况</div>
    </div>
    <div class="flex align-center justify-between px-2">
      <div class="item">
        <div class="flex align-center justify-center text-main font14">
          当前预警
        </div>
        <div>
          <div>
            <div class="flex px-2 text-left">
              <div class="colorfff">当前需要处理预警：</div>
              <p>5个</p>
            </div>
            <div class="flex px-2 text-left">
              <div class="colorfff">紧急预警：</div>
              <p>收费站未登记入场车辆晋 A33Y66</p>
            </div>
            <div class="flex px-2 text-left">
              <div class="colorfff">处理状态：</div>
              <p>未处理，需紧急处理</p>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="flex align-center justify-center text-main font14">
          当前企业
        </div>
        <div>
          <div>
            <div class="flex px-2 text-left">
              <div class="colorfff ellipsisOne">{{companyData.vcCompanyName}}</div>
            </div>
            <div class="flex px-2 text-left">
              <div class="colorfff">累计销量：</div>
              <p>{{companyData.intDecNumPrice}}万元</p>
            </div>
            <div class="flex px-2 text-left">
              <div class="colorfff">累计运输：</div>
              <p>{{companyData.gjHwYsl}}吨</p>
            </div>
            <div class="flex px-2 text-left">
              <div class="colorfff">累计纳税：</div>
              <p>{{companyData.nsPrice}}万元</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mapBg mt-2 flex">
     
          <bmap :mapHeight="480"></bmap>
    </div>
    <div class="flex align-center sale-chart02">
      <div id="sale-chart02"></div>
      <div class="flex-1">
        <div class="flex lengeds" v-for="(items, i) in firstData" :key="i">
          <div
            class="tipcolor"
            :style="{ 'background-color': colorList[i] }"
          ></div>
          <div class="flex align-center">
            <p class="names mr-2">{{ items.name }}</p>
            <div class="flex">
              <div class="num">{{ items.value }}个</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts");

import bmap from "@/components/mapsGd.vue"; 
export default {
  name: "saleFour",
  components:{
    bmap
  },
  data() {
    return {
      colorList: [
        "#FDD56A",
        "#12E733",
        "#FDB36A",
        "#9E87FC",
        "#73DDFE",
        "#7EBDFD",
        "#F1C521",
        "#126733",
        "#FD536A",
        "#9E17FC",
        "#93DDFE",
        "#1EBDFD",
      ],
      firstData: [
        {
          value: 0,
          name: "超限预警",
          ratio: "0%",
        },
        {
          value: 3,
          name: "未登记车辆入场",
          ratio: "5%",
        },
        {
          value: 10,
          name: "未申报车辆",
          ratio: "17%",
        },
        {
          value: 14,
          name: "稽查预警",
          ratio: "25%",
        },
        {
          value: 6,
          name: "纳税预警",
          ratio: "10%",
        },
        {
          value: 8,
          name: "停电预警",
          ratio: "14%",
        },
        {
          value: 16,
          name: "设备故障预警",
          ratio: "29%",
        },
      ],
    };
  },
  methods: {
    reSetData(){
       
    },
    draw() {
      let that = this;
      var drawCharts = document.getElementById("sale-chart02"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "个 ({d}%)",
        },
        title: {
          text: "合计",
          subtext: "302个",
          x: "center",
          y: "center",
          top: "42%",
          left: "38%",
          textAlign: "center",
          textStyle: {
            fontWeight: "600",
            fontSize: that.getRealPX(18),
            color: "#EF4864",
          },
          subtextStyle: {
            fontWeight: "600",
            fontSize: that.getRealPX(15),
            color: "#EF4864",
          },
        },
        color:that.colorList,
        series: [
          {
            name: "1-10月企业类型",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["40%", "50%"],
            // roseType: "radius",
            label: {
              normal: {
                show: true,
                position: "inner",
                formatter: function (params) {
                  return params.name + "\n" + params.percent + "%";
                },
                textStyle: {
                  fontWeight: "600",
                  fontSize: that.getRealPX(12),
                  color: "#fff",
                },
              },
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true,
            },
            data: that.firstData,
          },
        ],
      };
      drawChart.setOption(option);
    },
    // initmap() {
    //   var drawCharts = document.getElementById("saleMap"); // 对应地使用ByClassName
    //   var drawChart = echarts.init(drawCharts);
      
    //   let fontsize = this.getRealPX(15)
    //   var MapOutline = {
    //     type: "FeatureCollection",
    //     features: [
    //       {
    //         type: "Feature",
    //         properties: {
    //           name: "古交市",
    //           id: "140181",
    //         },
    //         geometry: {
    //           type: "MultiPolygon",
    //           coordinates: [
    //             [
    //               [
    //                 [112.095592070313, 38.1639479804688],
    //                 [112.125889921875, 38.1456728339844],
    //                 [112.152486601563, 38.1496034980469],
    //                 [112.20170046875, 38.1381996894532],
    //                 [112.207345, 38.1338430000001],
    //                 [112.200833769531, 38.1183388496094],
    //                 [112.234818144531, 38.0948744941407],
    //                 [112.229705839844, 38.0720729804687],
    //                 [112.251429472656, 38.0579274726563],
    //                 [112.277435332031, 38.0481972480469],
    //                 [112.291429472656, 38.0279274726563],
    //                 [112.303260527344, 38.0197585273438],
    //                 [112.327345, 37.9838430000001],
    //                 [112.32156375, 37.9691347480469],
    //                 [112.324022246094, 37.9524941230469],
    //                 [112.304136992188, 37.9267299628906],
    //                 [112.275338164063, 37.9441017890625],
    //                 [112.269427519531, 37.9041005683594],
    //                 [112.28170046875, 37.8881996894532],
    //                 [112.293822050781, 37.8788430000001],
    //                 [112.27298953125, 37.8627614570313],
    //                 [112.31170046875, 37.8281996894532],
    //                 [112.333187285156, 37.8194057441406],
    //                 [112.327345, 37.783843],
    //                 [112.267081328125, 37.738481671875],
    //                 [112.24298953125, 37.6981996894531],
    //                 [112.203878203125, 37.6873085761719],
    //                 [112.167345, 37.663843],
    //                 [112.156715117188, 37.6781325507813],
    //                 [112.113778105469, 37.6951955390626],
    //                 [112.097235136719, 37.7174318671875],
    //                 [112.04205203125, 37.7079311347657],
    //                 [112.003643828125, 37.7233705878906],
    //                 [111.964107695313, 37.7165639472656],
    //                 [111.932821074219, 37.7359267402344],
    //                 [111.903079863281, 37.7895778632812],
    //                 [111.811610136719, 37.7981081367188],
    //                 [111.796715117188, 37.8181325507813],
    //                 [111.760701933594, 37.8324428535156],
    //                 [111.733079863281, 37.8695778632813],
    //                 [111.727345, 37.8738430000001],
    //                 [111.752523222656, 37.9010158515625],
    //                 [111.812345, 37.8986452460938],
    //                 [111.822345, 37.8990407539063],
    //                 [111.938624296875, 37.8944325996094],
    //                 [111.952154570313, 37.9090334296876],
    //                 [111.978997832031, 37.9217018867188],
    //                 [112.051685820313, 37.9447158027344],
    //                 [112.006156035156, 37.9662026191406],
    //                 [112.037398710938, 37.9809474921875],
    //                 [112.011402617188, 38.0300722480469],
    //                 [112.013656035156, 38.0869167304687],
    //                 [111.99709109375, 38.1182192207032],
    //                 [112.037345, 38.1738430000001],
    //                 [112.095592070313, 38.1639479804688],
    //               ],
    //             ],
    //           ],
    //         },
    //       },
    //     ],
    //   };
    //   var points = [
    //     {
    //       name: "古交市矾石沟煤焦有限公司",
    //       value: [112.176178, 37.919127],
    //     },
    //     {
    //       name: "山西古交煤焦集团白家沟煤业有限公司",
    //       value: [112.118151, 37.973507],
    //     },
    //     {
    //       name: "山西古交煤焦集团金之中煤业有限公司",
    //       value: [112.09937, 37.932752],
    //     },
    //     {
    //       name: "山西煤炭运销集团古交辽源煤业有限公司",
    //       value: [112.169457, 37.906643],
    //     },
    //     {
    //       name: "古交市千峰精煤有限公司",
    //       value: [112.250302, 37.884805],
    //     },
    //   ];
    //   let colors = ["#FF8C00", "#00acea", "#1DE9B6"];
    //   echarts.registerMap("MapOutline", MapOutline);
    //   var option = {
    //     backgroundColor: "#0e215b",
    //     color: ["#FF8C00", "#00acea", "#1DE9B6"],
    //     tooltip: {
    //       trigger: "item",
    //       formatter: "{b}",
    //     },
    //     // legend: {
    //     //     orient: 'vertical',
    //     //     x: 'left',
    //     //     data: ['古交市矾石沟煤焦有限公司', '山西古交煤焦集团白家沟煤业有限公司','山西古交煤焦集团金之中煤业有限公司'],
    //     //     textStyle: {
    //     //         color: '#fff'
    //     //     }
    //     // },
    //     // visualMap: {
    //     //     type: 'continuous',
    //     //     seriesIndex: [2, 3],
    //     //     min: 0,
    //     //     max: 100,
    //     //     calculable: true,
    //     //     color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],
    //     //     textStyle: {
    //     //         color: '#fff'
    //     //     }
    //     // },
    //     geo: {
    //       map: "MapOutline",
    //       show: false,
    //     },
    //     series: [
    //       {
    //         type: "map",
    //         map: "MapOutline",
    //         aspectScale: 0.75,
    //         itemStyle: {
    //           borderColor: "#4ea8f8",
    //           borderWidth: 0.6,
    //           areaColor: "rgba(0,0,0,0.5)",
    //         },
    //         label: {
    //           show: true,
    //           textStyle: {
    //             color: "#fff",
    //              fontSize: fontsize,
    //           },
    //           emphasis: {
    //             textStyle: {
    //               color: "#fff",
    //             },
    //           },
    //         },
    //         emphasis: {
    //           label: {
    //             show: false,
    //           },
    //           itemStyle: {
    //             areaColor: "rgba(0,0,0,0.5)",
    //           },
    //         },
    //       },
    //       {
    //         type: "effectScatter",
    //         coordinateSystem: "geo",
    //         showEffectOn: "render",
    //         rippleEffect: {
    //           period: 5,
    //           scale: 5,
    //           brushType: "fill",
    //         },
    //         hoverAnimation: true,
    //         label: {
    //           formatter: "{b}",
    //           position: "right",
    //           offset: [15, 0],
    //           color: (param) => colors[param.dataIndex % colors.length],
    //           show: true,
    //            fontSize: fontsize,
    //         },
    //         itemStyle: {
    //           color: (param) => {
    //             return colors[param.dataIndex % colors.length];
    //           },
    //           shadowBlur: 10,
    //           shadowColor: "#333",
    //           opacity: 0.75,
    //         },
    //         emphasis: {
    //           itemStyle: {
    //             opacity: 1, //线条宽度
    //           },
    //         },
    //         data: points,
    //       },
    //       {
    //         name: "古交市矾石沟煤焦有限公司",
    //         type: "lines",
    //         zlevel: 2,
    //         symbol: ["none", "arrow"],
    //         symbolSize: 7,
    //         effect: {
    //           show: true,
    //           period: 4,
    //           trailLength: 0.02,
    //           symbol: "circle",
    //           symbolSize: 4,
    //           color: "#fff",
    //         },
    //         lineStyle: {
    //           width: 0.5, //线条宽度
    //           opacity: 0.5, //尾迹线条透明度
    //           curveness: 0.3, //尾迹线条曲直度
    //           shadowBlur: 10,
    //         },
    //         emphasis: {
    //           lineStyle: {
    //             width: 2, //线条宽度
    //           },
    //         },
    //         data: [
    //           {
    //             name:
    //               "古交市矾石沟煤焦有限公司->山西古交煤焦集团白家沟煤业有限公司",
    //             value: 40,
    //             coords: [
    //               [112.176178, 37.919127],
    //               [112.118151, 37.973507],
    //             ],
    //           },
    //         ],
    //       },
    //       {
    //         name: "山西古交煤焦集团白家沟煤业有限公司",
    //         type: "lines",
    //         zlevel: 2,
    //         symbol: ["none", "arrow"],
    //         symbolSize: 7,
    //         effect: {
    //           show: true,
    //           period: 4,
    //           trailLength: 0.02,
    //           symbol: "circle",
    //           symbolSize: 4,
    //           color: "#fff",
    //         },
    //         lineStyle: {
    //           width: 0.5, //线条宽度
    //           opacity: 0.5, //尾迹线条透明度
    //           curveness: 0.3, //尾迹线条曲直度
    //           shadowBlur: 10,
    //         },
    //         emphasis: {
    //           lineStyle: {
    //             width: 2, //线条宽度
    //           },
    //         },
    //         data: [
    //           {
    //             name:
    //               "山西古交煤焦集团白家沟煤业有限公司->山西古交煤焦集团金之中煤业有限公司",
    //             value: 40,
    //             coords: [
    //               [112.118151, 37.973507],
    //               [112.09937, 37.932752],
    //             ],
    //           },
    //         ],
    //       },
    //     ],
    //   };
    //   drawChart.setOption(option);
    // },
  },
  props:{
    companyData:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  watch:{
    companyData:{
      deep:true,
      handler(){
         console.error(this.companyData)
      },
    }
  },
  mounted() {
    this.draw();
    // this.$nextTick(() => {
    //   this.initmap();
    // });
  },
};
</script>
<style lang="stylus" scoped>
.sale-chart02 {
  width: 100%;
  height: 210px;

  #sale-chart02 {
    width: 50%;
    height: 210px;
  }
}

.four {
  width: 613px;
  height: 975px;
  background: url('../../../assets/img/sale/bg02.png') no-repeat;
  background-size: 613px 975px;

  .item-title {
    width: 264px;
    height: 40px;
    background: url('../../../assets/img/item-title.png');
    background-size: 264px 40px;
    margin-top: 6px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #DEF1FF;
  }

  .item {
    width: 277px;
    height: 148px;
    background: url('../../../assets/img/warning/icon02.png') no-repeat;
    background-size: 277px 148px;
    margin-top: 18px;
    font-size: 14px;

    .px-2 {
      margin-top: 8px;
    }

    p {
      color: #F74869;
    }

    .colorfff {
      min-width: 80px;
    }

    .text-main {
      height: 30px;
    }
  }
}

.mapBg {    
  width: 613px;
  height: 500px;
  position: relative;
}

#saleMap {
  width: 607px;
  margin-left: 3px;
  height: 500px;
}

/deep/.BMap_cpyCtrl {
  display: none;
}

/deep/ .anchorBL {
  display: none;
}

.lengeds {
  text-align: left;
  margin-bottom: 5px;
  font-size: 14px;
  color: #00F7A1;

  .tipcolor {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: 4px;
  }

  .names {
    color: #08C1F4;
    // margin-bottom: 6px;
  }

  .num {
    width: 60px;
  }
}
</style>
